<template>
  <view class="create-history">
    <wd-search v-model="keyWord" placeholder-left hide-cancel @search="queryCreatingHistory" />
    <view class="w-full flex gap-1 text-[#4c4c4c] text-[28rpx] px-3 box-border">
      <view
        v-for="item in optionsList"
        :key="item.label"
        class="px-2 py-1 item"
        :class="item.value === currentOptions ? 'item-active' : ''"
        @tap="onChangeType(item.value)"
        >{{ item.label }}</view
      >
    </view>
    <waterfall-flow :items="imageList" :columns="2" :gutter="10" @itemClick="goCardDetail" />
    <wd-status-tip v-if="!imageList?.length" image="search" tip="当前搜索无结果" />
    <!-- 加载状态 -->
    <view v-else class="flex justify-center wt-4">
      <wd-loading v-if="loading" :size="20" color="#c13432" />
      <text v-if="loading" class="loading-text">加载中...</text>
      <text v-else-if="noMore" class="loading-text">没有更多了</text>
      <text v-else class="loading-text">上拉加载更多</text>
    </view>
  </view>
</template>
<script lang="ts" setup>
import WaterfallFlow from "@/components/WaterfallFlow.vue";
import { WaterfallItem } from "@/hooks/useWaterfallFlow";
import UseCreatingHistory from "../hooks/UseCreatingHistory";

const {
  queryCreatingHistory,
  optionsList,
  currentOptions,
  pageOptions,
  loading,
  cardList,
  noMore,
  keyWord,
} = new UseCreatingHistory();
queryCreatingHistory();

// 瀑布流图片
const imageList = computed(() => {
  return cardList.value.map((item) => {
    return {
      url: item.aidImageList[0].thumbnailUri,
      id: item.id,
      width: item.aidImageList[0].width,
      height: item.aidImageList[0].height,
      title: item.userName,
      avatar: item.avatar,
      way: JSON.parse(item.createVariable).way,
    };
  });
});

// 切换类型
const onChangeType = (type: string) => {
  currentOptions.value = type;
  pageOptions.value.pageNum = 1;
  queryCreatingHistory();
};

const onRefresh = () => {
  if (loading.value || noMore.value) return;
  pageOptions.value.pageNum++;
  queryCreatingHistory(false);
};

defineExpose({ onRefresh });

// go卡片详情
const goCardDetail = (item: WaterfallItem) =>
  uni.navigateTo({ url: `/pages/creationDetails/index?id=${item.id}` });
</script>
<style lang="scss" scoped>
.item-active {
  @apply text-[#c13432];
  text-shadow:
    0.5px 0 0 #c13432,
    -0.5px 0 0 #c13432;
  transform: scale(1.05);
}
.loading-text {
  font-size: 28rpx;
  color: #999;
}
</style>
